<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-07-15 16:16:26
 * @LastEditors: william
 * @LastEditTime: 2025-10-23 09:23:26
-->
<template>
  <sh-slider
    v-model="modelValue"
    type="annular"
    :min="min"
    :max="max"
    :step="step"
    :railHeight="railHeight + 'px'"
    :railRadius="railRadius + 'px'"
    :railColor="railColor"
    :sliderWidth="sliderWidth + 'px'"
    :sliderHeight="sliderHeight + 'px'"
    sliderRadius="50%"
    :sliderColor="sliderColor"
    sliderShadow="none"
    :style="{
      hegiht: railHeight + 'px',
      padding: 0
    }"
    :="$attrs"
  />
</template>

<script setup>
defineOptions({
  name: 'NwShSlider',
  inheritAttrs: false
})

const props = defineProps({
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 6
  },
  step: {
    type: Number,
    default: 1
  },
  railColor: {
    type: String,
    default: '#27BE87'
  },
  sliderColor: {
    type: String,
    default: '#fff'
  },
  railHeight: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(42)
  },
  railRadius: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(50)
  },
  sliderWidth: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(50)
  },
  sliderHeight: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(50)
  }
})

const modelValue = defineModel({
  type: [Number, Array],
  default: 0
})
</script>

<style lang="scss" scoped>
:deep(.sh-slider) {
  // .sh-block-right {
  //   transform: translateX(-2rpx) translateY(-50%) !important;
  // }
  .rail3 {
    background-color: #f5f5f5 !important;
  }
  .sh-block-right {
    z-index: 5;
  }
}
</style>
